<template>
	<div>
		<!-- 搜索添加栏 -->
		<Row>
			<Card>
				<Form ref="search" :model="searchData" :rules="searchReg" :label-width="80">
					<Row>
						<i-col :xs="24" :md="12" :lg="6">
							<FormItem label="用户名" prop="name">
								<Input v-model="searchData.name" suffix="ios-search" placeholder="请输入用户名称" style="width: auto">
								<Icon type="ios-search" slot="suffix" />
								</Input>
							</FormItem>
						</i-col>
						<i-col :xs="24" :md="12" :lg="6">
							<FormItem label="用户名" prop="userTel">
								<Input v-model="searchData.userTel" suffix="ios-search" placeholder="请输入手机号" style="width: auto">
								<Icon type="ios-search" slot="suffix" />
								</Input>
							</FormItem>
						</i-col>
						<i-col :xs="24" :md="12" :lg="6">
							<FormItem label="用户性别" prop="name">
								<Select v-model="searchData.userSex" style="width:200px">
									<Option value="男">男</Option>
									<Option value="女">女</Option>
								</Select>
							</FormItem>
						</i-col>
					</Row>
					<FormItem>
						<Button v-if="btnAccess.query" type="primary" style="marigin:0 20px" :loading="searchLoading" @click="searchSubmit(10,1)">提交搜索</Button>
						<Button @click="submitReset">重置搜索</Button>
					</FormItem>
				</Form>
			</Card>
		</Row>

		<!-- 上传测评对象 -->
		<Row style="margin-top:20px;display:none;">
			<Card title="导入EXCEL">
				<!--
          本地  action="api/evaluateUser/importEvaluateUser"
          线上  action="/evaluateUser/importEvaluateUser"
        -->
				<Upload ref="upload" :before-upload="handleUpload" :on-success="handleSuccess" :format="['xls','xlsx']" :on-format-error="handleFormatError" :action="importUrl">
					<Button type="success" @click="downloadTemplate" style="margin-right: 20px;">下载测评对象模板</Button>
					<Tooltip content="温馨提示：上传文件前请先下载模板，依照模板格式上传" placement="top-start" max-width="220">
						<Button type="primary" icon="ios-cloud-upload-outline">上传测试对象</Button>
					</Tooltip>
				</Upload>
				<div v-if="file !== null">
					文件名: {{ file.name }}
					<Button type="primary" @click="upload">点击上传</Button>
				</div>
				<!-- 上传错误提示 -->
				<div>
					<Alert banner closable type="error" v-for="item in errorMessage" :key="item">{{item}}</Alert>
				</div>
			</Card>
		</Row>

		<!-- 表格 -->
		<Row style="margin-top:20px">
			<Card>
				<div class="btn-arrs">
					<Button type="info" v-if="btnAccess.add" @click="showUserModal">添加测评对象</Button>
					<!-- <Button v-if="btnAccess.del2" type="error" @click="batchDelete" :disabled="isDisable">批量删除</Button>
          <Button
            v-if="btnAccess.upd"
            type="primary"
            @click="showTypeModal"
            :disabled="isDisable"
            style="margin-left:15px;"
          >批量修改用户分类</Button>-->
				</div>
				<Table border @on-selection-change="selectChange" @on-select-all="tabelBatchSelect" @on-select-all-cancel="TableCancelSelect" :loading="tabelLoading" :columns="userHead" :data="userData"></Table>
				<div style="margin-top:20px;margin-left:35%">
					<Page @on-change="pageNumberChange" :page-size="pageSize" :total="pageTotal" @on-page-size-change="pageSizeChange" show-elevator show-sizer />
				</div>
			</Card>
		</Row>

		<!-- 添加测评对象/编辑测评对象 -->
		<Modal v-model="isUserModal" :title="userModalTitle" :loading="userModalLoading" @on-cancel="cancelUserModal">
			<Form ref="userManagement" :model="userForm" :rules="userReg" :label-width="80">
				<FormItem label="用户名" prop="userName">
					<Input v-model="userForm.userName" placeholder="请输入用户名称" style="width: 300px"></Input>
				</FormItem>
				<FormItem label="联系电话" prop="userTel">
					<Input :number="true" v-model="userForm.userTel" placeholder="请输入联系电话" style="width: 300px"></Input>
				</FormItem>
				<FormItem label="用户类型" prop="userTypeId">
					<Select v-model="userForm.userTypeId" style="width:300px">
						<Option v-for="item in getUserType" :value="item.id" :key="item.id">{{ item.userType}}</Option>
					</Select>
					</Select>
				</FormItem>
				<FormItem label="性别">
					<Select v-model="userForm.userSex" style="width:300px">
						<Option value="男">男</Option>
						<Option value="女">女</Option>
					</Select>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button v-if="btnAccess.upd" type="primary" size="large" :loading="userModalLoading" @click="submitUserModal">提交</Button>
				<Button size="large" @click="cancelUserModal">取消</Button>
			</div>
		</Modal>

		<!-- 批量修改用户分类 -->
		<Modal v-model="userTypeModal" title="批量修改用户分类" @on-ok="submitUserType" @on-cancel="cancelTypeModal">
			<Form :model="userTypeForm">
				<FormItem label="用户分类">
					<Select v-model="userTypeForm.userType" style="width:300px">
						<Option value="0">无限制</Option>
						<Option value="2">党代表</Option>
						<Option value="3">人大代表</Option>
						<Option value="4">政协委员</Option>
						<Option value="5">企业家代表</Option>
						<Option value="6">城乡代表</Option>
					</Select>
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>
<script>
import { URL } from "@/libs/util";
import { userAjax, userTestAjax } from "@/api/city";
// 以防命名冲突
const HOST = URL;
// 测评对象管理
const USERMANGER_URL = "/exam/User/userManage";
// 删除URL
const DELETE_URL = "/evaluateUser/delete";
// 修改URL
const UPDATE_URL = "/evaluateUser/update";
// 添加URL
const INSERT_URL = "/evaluateUser/insert";
// 查询URL
const QUERY_URL = "/evaluateUser/query";
// 批量修改用户分类
const UPDATE_USERTYPEURL = "/evaluateUser/batchUpdate";
// 手机验证
const PHONE_REG = new RegExp("^1(3|4|5|7|8)\\d{9}$");
const INSERT_TITLE = "添加测评对象";
const UPDATE_TITLE = "编辑测评对象";
export default {
	data() {
		// 验证手机号码
		const phoneReg = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入联系电话"));
			} else {
				if (!PHONE_REG.test(value)) {
					callback(new Error("请输入正确的手机号码"));
				}
			}
			callback();
		};
		return {
			// 增删改查权限按钮
			btnAccess: {
				add: true,
				add2: "inline-block",
				del: "inline-block",
				del2: true,
				upd: true,
				query: true
			},
			getUserType: [], // 获取用户类型
			deleteArr: { list: [] }, // 批量删除
			isUserModal: false, // 模态框
			searchLoading: false, // 搜索Loading
			userModalLoading: false, // 提交loading
			tabelLoading: false, // 表格loading
			userModalTitle: "", // 模态框title
			pageSize: 10,
			pageNumber: 1,
			pageTotal: 10,
			userForm: {
				userTypeId: null,
				name: "",
				departCode: "",
				userType: "",
				userSex: "",
				phone: "",
				age: null
			},
			searchData: {
				optionType: "query",
				userName: "",
				userSex: "",
				userTel: "",
				userType: ""
			},
			searchReg: {},
			userReg: {
				userName: [
					{
						required: true,
						message: "请输入用户名称",
						trigger: "blur"
					}
				],
				// userTypeId: [
				//   {
				//     required: true,
				//     message: "请选择用户类型",
				//     trigger: "change"
				//   }
				// ],
				userTel: [
					{
						required: true,
						validator: phoneReg,
						trigger: "blur"
					}
				]
			},
			userData: [],
			userHead: [
				// {
				//   type: "selection",
				//   width: 60,
				//   align: "center"
				// },
				{
					title: "用户名称",
					key: "userName"
				},
				{
					title: "联系电话",
					key: "userTel"
				},
				{
					title: "用户性别",
					key: "userSex"
				},
				{
					title: "用户类型",
					key: "userType"
				},
				{
					title: "操作",
					key: "action",
					width: 220,
					align: "center",
					render: (h, params) => {
						return h("div", [
							h(
								"Button",
								{
									props: {
										type: "primary"
									},
									style: {
										marginRight: "5px"
									},
									on: {
										click: () => {
											this.userForm = JSON.parse(
												JSON.stringify(params.row)
											);
											console.log(this.userForm);
											this.userModalTitle =
												"编辑测评对象";
											this.isUserModal = true;
											// 如果编辑时候可以显示出来， 但是不可填写
										}
									}
								},
								"查看或编辑"
							),
							h(
								"Button",
								{
									props: {
										type: "error"
									},
									style: {
										display: this.btnAccess.del
									},
									on: {
										click: () => {
											this.deleteUser(params.row);
											this.deleteArr = { list: [] };
										}
									}
								},
								"删除"
							)
						]);
					}
				}
			],
			errorMessage: [], // 上传错误提示
			file: null,
			importUrl: URL + "/evaluateUser/importEvaluateUser", // 导入测试对象url
			isDisable: true,
			selectArrr: [],
			// 用户分类模态框
			userTypeModal: false,
			userTypeForm: {
				userType: ""
			}
		};
	},
	methods: {
		// 表格取消全选
		TableCancelSelect(selection) {
			this.deleteArr["list"] = [];
		},
		// 表格全选
		tabelBatchSelect(selection) {
			selection.forEach(item => {
				this.deleteArr["list"].push(item.id); // 获取Id
			});
		},
		// 搜索
		searchSubmit(pageSize, pageNumber) {
			this.searchLoading = true;
			this.searchData.optionType = "query";
			this._getUserData(
				this.searchData,
				USERMANGER_URL,
				pageSize,
				pageNumber
			);
		},
		// 重置搜索
		submitReset() {
			this.searchLoading = false;
			this.searchData = {
				userName: "",
				userDepartment: "",
				userPermissions: ""
			};
		},
		// 删除用户
		deleteUser(row) {
			this.$Modal.confirm({
				title: "删除用户",
				content: "<p>删除完成后将无法恢复</p>",
				loading: true,
				onOk: () => {
					let obj = { optionType: "del" };
					if (row.id !== undefined) {
						obj.id = row.id;
						// this.deleteArr["list"].push(row.id);
					}
					this._userAjax(obj, USERMANGER_URL).then(result => {
						this.$Modal.remove();
						if (result.code === "200") {
							this.$Message.info("删除成功!");
							this.deleteArr = { list: [] };
							this.searchData.optionType = "query";
							this._getUserData(
								this.searchData,
								USERMANGER_URL,
								this.pageSize,
								this.pageNumber
							);
						} else {
							this.$Message.error("删除失败！");
						}
					});
				}
			});
		},
		// 批量删除用户
		batchDelete() {
			this.$Modal.confirm({
				title: "批量删除用户",
				content: "<p>删除完成后将无法恢复</p>",
				loading: true,
				onOk: () => {
					this.deleteArr["list"] = this.selectArrr;
					this._userAjax(this.deleteArr, DELETE_URL).then(result => {
						this.$Modal.remove();
						if (result.code === "200") {
							this.$Message.info("删除成功!");
							this.isDisable = true;
							this.deleteArr = { list: [] };
							this._getUserData(
								this.userData,
								QUERY_URL,
								this.pageSize,
								this.pageNumber
							);
						} else {
							this.$Message.error("删除失败！");
						}
					});
				}
			});
		},
		// 显示模态框
		showUserModal() {
			this.userModalTitle = "添加测评对象";
			this.isUserModal = true;
		},
		// 提交
		submitUserModal() {
			this.$refs["userManagement"].validate(valid => {
				if (valid) {
					this.userModalLoading = true;
					if (this.userModalTitle === INSERT_TITLE) {
						this.userForm.userType = this.userForm.userTypeId;
						this.userForm.optionType = "add";
						this._userAjax(this.userForm, USERMANGER_URL).then(
							result => {
								this.cancelUserModal();
								this.userModalLoading = false;
								if (result.code === "200") {
									this.$Message.success("添加成功！");
									this.searchData.optionType = "query";
									this._getUserData(
										this.searchData,
										USERMANGER_URL,
										this.pageSize,
										this.pageNumber
									);
								} else {
									this.$Message.error("添加失败！");
								}
							}
						);
					} else if (this.userModalTitle === UPDATE_TITLE) {
						this.userForm.userType = this.userForm.userTypeId;
						this.userForm.optionType = "update";
						this._userAjax(this.userForm, USERMANGER_URL).then(
							result => {
								this.cancelUserModal();
								this.userModalLoading = false;
								if (result.code === "200") {
									this.$Message.success("添加成功！");
									this.searchData.optionType = "query";
									this._getUserData(
										this.searchData,
										USERMANGER_URL,
										this.pageSize,
										this.pageNumber
									);
								} else {
									this.$Message.error("添加失败！");
								}
							}
						);
					}
				} else {
					this.$Message.error("请填写完整！");
				}
			});
		},
		// 关闭模态框
		cancelUserModal() {
			this.$refs["userManagement"].resetFields();
			this.isUserModal = false;
			this.userModalLoading = false;
			this.userForm = {
				name: "",
				department: "",
				userSex: "",
				phone: "",
				age: null
			};
		},
		// 页码
		pageNumberChange(pageNumber) {
			this.pageNumber = pageNumber;
			this._getUserData(
				this.searchData,
				QUERY_URL,
				this.pageSize,
				this.pageNumber
			);
		},
		// 页数
		pageSizeChange(pageSize) {
			this.pageSize = pageSize;
			this._getUserData(
				this.searchData,
				QUERY_URL,
				this.pageSize,
				this.pageNumber
			);
		},
		// 阻止自动上传文件
		handleUpload(file) {
			this.file = file;
			return false;
		},
		// 上传文件
		handleSuccess(res, file) {
			if (res.code === "200") {
				this.$Notice.success({
					title: res.message
				});
				this._getUserData(
					this.searchData,
					QUERY_URL,
					this.pageSize,
					this.pageNumber
				);
			} else if (res.code === "500") {
				let errorArr = res.results.error;
				this.errorMessage = errorArr;
				this.$Notice.error({
					title: res.message
				});
			}
		},
		// 点击上传文件
		upload() {
			this.$refs.upload.post(this.file);
			setTimeout(() => {
				this.file = null;
			}, 1500);
		},
		// 验证上传格式
		handleFormatError(file) {
			this.$Notice.warning({
				title: "文件格式错误",
				desc: "文件" + file.name + " 格式错误, 请选择xls或者xlsx"
			});
		},
		// 添加/修改
		_userAjax(formData, url) {
			const keyOne = "filter";
			return new Promise((resolve, reject) => {
				userTestAjax({ formData, url, keyOne })
					.then(result => {
						if (result.data !== undefined) {
							resolve(result.data);
						} else {
							reject(err);
						}
					})
					.catch(err => {
						console.log(err);
					});
			});
		},
		// 查询
		_getUserData(formData, url, pageSize, pageNumber) {
			this.tabelLoading = true;
			formData = Object.assign(formData, {
				pageSize,
				pageNumber
			});
			const keyOne = "filter";
			userTestAjax({ formData, url, keyOne })
				.then(result => {
					console.log(result);
					this.tabelLoading = false;
					if (result.data.code === "200") {
						this.searchLoading = false;
						this.userData = result.data.results.data;
						this.pageTotal =
							parseInt(result.data.results.pageTotal) * 10;
						this.$Message.success(result.data.message);
					} else {
						this.$Message.error(result.data.message);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 查询用户类型
		_getUserType(formData, pageSize, pageNumber) {
			const keyOne = "typeFilter";
			const url = "/exam/User/userTypeManage";
			userTestAjax({ formData, url, keyOne })
				.then(result => {
					if (result.data.code === "200") {
						this.getUserType = result.data.results.data;
						this.$Message.success(result.data.message);
					} else {
						this.$Message.error(result.data.message);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 批量勾选
		selectChange(selection) {
			let arr = []; // 用户id
			selection.forEach(item => {
				arr.push(item.id);
			});
			this.selectArrr = arr;
			if (this.selectArrr.length === 0) {
				this.isDisable = true;
			} else {
				this.isDisable = false;
			}
		},
		/**
		 * 下载测评对象模板
		 */
		downloadTemplate() {
			window.open(
				HOST +
					"/townScore/downTownScoreMoudle?fileName=cePingMould.xls&chinaName=测评对象导入模板.xls"
			);
		},
		showTypeModal() {
			this.userTypeModal = true;
		},
		cancelTypeModal() {
			this.userTypeModal = false;
		},
		// 批量修改用户类型
		submitUserType() {
			this.userTypeForm.userIds = this.selectArrr;
			let formData = this.userTypeForm;
			const keyOne = "evaluateUserEntity";
			let url = UPDATE_USERTYPEURL;
			userTestAjax({ formData, url, keyOne })
				.then(result => {
					this.isDisable = true;
					if (result.data.code === "200") {
						// 重新查询表格
						this._getUserData(
							this.searchData,
							QUERY_URL,
							this.pageSize,
							this.pageNumber
						);

						this.$Message.success(result.message);
					} else {
						this.$Message.error(result.message);
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	},
	created() {
		this._getUserData(
			this.searchData,
			USERMANGER_URL,
			this.pageSize,
			this.pageNumber
		);

		// 查询用户类型
		let queryObj = { optionType: "query" };
		this._getUserType(queryObj);

		// 获取按钮权限
		let btnAccess = sessionStorage.getItem("btnaccess");
		this.globalFunction(btnAccess);
	},
	computed: {
		getDepartmentList() {
			return this.$store.state.user.departmentList;
		}
	}
};
</script>
<style scoped>
</style>
